    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>拖拽案例</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            /*body{*/
            /*    position: relative;*/

            /*}*/
            #head{
                width: 100%;
                background: aqua;
                height: 40px;
            }
            #head a{
                display: inline-block;
                text-decoration: none;
                text-align: center;
                color: black;
                font-size: 25px;
            }
            #movingBox{
                height: 300px;
                width:400px;
                border: 5px solid rgba(11, 28, 25, 0.47);
                box-shadow: 2px 2px 2px 2px #666;
                position: absolute;
                left: 40%;
                top: 40%;
            }
            #boxHead{
                background: #999999;
                width: 100%;
                cursor: crosshair;
                height: 40px;
            }
            span{
                float: right;
            }
        </style>
        <script src="publicfunction.js"></script>
    </head>
    <body>
            <div id="head">
                <a href="#">注册信息</a>
            </div>

        <div id="movingBox">
            <div id="boxHead" >
                注册信息填写
                <span id="span">【关闭】</span>
            </div>
            <div id="main"></div>
        </div>

    <script>
        //需求分析：在按下鼠标左键 按下位置是boxHead这个元素的所在地 所以该元素要有宽高（必须）
        // 按住左键可以拖动该“信息修改”窗口在页面任意位置移动
        //思路：采用onmousedown的函数与onmousemove函数联合使用
        //获取鼠标按下 在页面坐标 并赋值给这个小窗口  为了使该小窗口移动跟着鼠标一致！！！（不差一丝一毫）就需要获取该鼠标在盒子中的位置
        var boxHead=document.getElementById('boxHead');
        var movingBox=document.getElementById('movingBox');

        boxHead.onmousedown=function (event) {
            event=event||window.event;
            var yy=event.pageY||scroll().top+event.clientY;
            var xx=event.pageX|scroll().left+event.clientX;

            var xxx=xx-movingBox.offsetLeft;
            var yyy=yy-movingBox.offsetTop;//在父盒子定位的情况下position:absolute/relative 在这里父盒子是movingBox
            //子盒子是boxHead 那么获取鼠标在盒子中的位置 只能使用父盒子的offsetWidth与offsetHeight
            document.onmousemove=function (event) {
                event=event||window.event;

                var pageY=event.pageY||scroll().top+event.clientY;
                var pageX=event.pageX||scroll().left+event.clientX;


                movingBox.style.top=(pageY-yyy)+"px";
                movingBox.style.left=(pageX-xxx)+"px";
                console.log("pageY"+pageY);
                console.log( "yyy"+yyy);
                console.log("pageY-yyy"+(pageY-yyy));
                console.log("boxHead.style.top"+boxHead.style.top);
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

            }
        };
        boxHead.onmouseup = function () {
            //解绑
            document.onmousemove = null;
        }

    </script>
    </body>
    </html>